Adding a Promo Code

The first thing you need to do when introducing a promo code to the form is to add the "Text input" element.

After that, add the "Code" element with the needed snippet to the very bottom of the form.

<style>
#success, #fail, #promo_field {
display: block;
padding: 20px;
font-size: 20pt;
font-weight: bold;
text-align: center;
}
#success, #promo_field {background-color: #77f277; color: #000;}
#fail {background-color: #f74e48; color: #fff;}
</style>
<div id="promo_field" style="display:none;">Promo code: <span id="promo_code"></span></div>

Now you can add the button that will verify and apply the promo code. To do that, next to the "Text input" add the "Code" element with the following snippet:

<button class="button-promo"><span>Apply promo code</span></button>

The final step is to add the script that will process, check and apply the entered promo code as well as calculate the discounted price. Add one more "Code" element to the bottom of the form with the following snippet:

<span id="success" style="display:none;">Promo code has been successfully applied</span>
<span id="fail" style="display: none;">Sorry, this promo code doesn’t exist</span>
<script>
var code = {
name: "promo", // promo code name
percent: "30%", // discount percentage
result: 1200 // apply promo code if price is equal to or more than 1200
};

$(function() {
$(".button-promo").click(function() {
RESULTS.go();
if(RESULTS.db.res[1] < code.result) {
return false;
} else {
$("#promo_code").text(code.name);
}
});

$(".button-promo").on("click", function() {
if($("#input_text-ID").val() === code.name) {
$(".button-promo").attr("disabled", "disabled").css("opacity", ".6");
$("#input_text-ID").attr("disabled", "disabled").css("opacity", ".6");
STEPFORM.data.results[0].formula += "-" + code.percent;
RESULTS.go();
$("#success").slideDown(400, function() {
appNormalise();
});
$("#fail").slideUp(200); 
} else if($("#input_text-ID").val() !== code.name) {
$("#fail").show(); 
appNormalise();
}
}) 
});
</script>

Where input_text-ID is the ID of your promo code field. To get the ID, right-click on element and choose "Inspect"